<%@ page import="com.ciquan.server.util.web.BasePathUtil" %>
<%--
  Created by IntelliJ IDEA.
  User: kakalee
  Date: 15/1/24
  Time: 14:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<style>

    .item {
        height: 60px;
    }

    .item-img {
        width: 40px;
        height: 40px;
        float: left;
    }

    .item-text {
        float: left;
        margin-left: 10px;
        font-size: 10px;
    }

    .item-text-bolder {
        font-weight: bolder;
    }

    .item-text span {
        display: block;
    }

    .item-text-time {
        float: left;
        font-size: 10px;
    }

    .receive {
        width: 300px;
        background:#428bca;
        border-radius:5px;
        margin:10px auto 0;
        padding: 10px;
        float: left;
        clear: both;
    }

    .send {
        width: 300px;
        background:#CCCCCC;
        border-radius:5px;
        margin:10px auto 0;
        padding: 10px;
        float: right;
        clear: both;
    }

    .receive img {
        width: 280px;
    }

    .send img {
        width: 280px;
    }

    .chat-input {
        float: left;
        width: 80%;
        height: 35px;
        margin: 10px 10px 10px 10px;
        padding: 7px 10px 2px;
        outline: none;
        box-shadow: 1px 1px 2px #bbb inset;
        background: #EEE;
        background: #fafafa;
        border-radius: 2px;
        border: none;
        border-bottom: 1px solid #fff;
        border: 1px solid #ccc;
        font: 14px/1.5 Helvetica, "微软雅黑", "黑体", Arial, Tahoma;
        line-height: 1.2em;
        resize: none;
        overflow:hidden;
    }

    .btn {
        margin: 10px 10px 10px 10px;
    }

</style>
<jsp:include page="header.jsp"></jsp:include>
<script>
    var lastWorks = null;
    var lastUser = null;
    var session = {};
    $(document).ready(function(){
        $('.works').click(function(){
            works($(this));
        })

        works($('.works').eq(0));
        $('#send').click(function(){
            send();
        });
    });

    function works(w) {
        var worksId = w.attr('worksId');
        var userId = w.attr('userId');

        session.worksId = worksId;

        $.ajax({
            type: 'GET',
            url: '/message/users?worksId=' + worksId + '&userId=' + userId,
            data: {},
            success: function(data) {
                var userInfos = data.data.userInfos;
                showUsers(userInfos);
            },
            dataType: 'json'
        });

        if(lastWorks != null) {
            lastWorks.removeClass('active');
        }
        w.addClass('active');
        lastWorks = w;
    }

    function showUsers(userInfos) {
        $('#users').empty();
        $('#session').empty();
        lastUser = null;
        for (var i = 0; i < userInfos.length; i++) {
            $('#users').append("<a href='#' class='list-group-item user item' userId='" + userInfos[i].userid + "'>" +
                    "<img src='"  + userInfos[i].face + "' class='item-img'/>" +
                    "<div class='item-text'><span class='item-text-bolder'>" + userInfos[i].name +"</span>" +
                    "<span>" + userInfos[i].mobile + "</span>" +
                    "</div><div class='item-text-time'>" + userInfos[i].lastMessage.cTime + "</div>" +
                     "</a>");
        }

        $('.user').click(function(){
            user($(this));
        });

        user($('.user').eq(0));
    }

    function user(u) {
        var userId = u.attr('userId');
        session.userId = userId;
        if(lastUser != null) {
            lastUser.removeClass('active');
        }
        u.addClass('active');
        lastUser = u;
        showSession(session)
    }

    function showSession(s) {
        $.ajax({
            type: 'GET',
            url: '/message/session?worksId=' + s.worksId + '&userId=' + s.userId,
            data: {},
            success: function(data) {
                $('#session').empty();
                var messages = data.data;
                for(var i = 0; i < messages.length; i++) {
                    if(messages[i].imagePath != '') {
                        messages[i].content = "<img src='" + messages[i].imagePath + "'/>";
                    }
                    if(messages[i].sendUserId == s.userId) {
                        $('#session').append("<div><div class='receive'>" + messages[i].content +
                                "</div></div>");
                    }

                    else {
                        $('#session').append("<div><div class='send'>" + messages[i].content +
                                "</div></div>");
                    }

                }
                var div = document.getElementById("session");
                div.scrollTop = div.scrollHeight;
            },
            dataType: 'json'
        });
    }

    function send() {
        var  content = $('#chat').val();
        if(content == '') {
            alert("请输入内容");
        }

        else {
            $.ajax({
                type: 'POST',
                url: '/message/send?worksId=' + session.worksId + '&userId=' + session.userId,
                data: {'content': content},
                success: function(data) {
                    $('#chat').val('');
                    showSession(session);
                },
                dataType: 'json'
            });
        }
    }

</script>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <div class="col-sm-3">
        <div class="list-group" style="height: 500px; overflow-y:scroll;">
            <c:forEach items="${worksInfos}" var="item" varStatus="status">
                <a worksId="${item.worksid}" userId="${item.userid}" class="list-group-item works item" href="#">
                    <img src="${item.thumbPicUrl}" class="item-img"/>
                    <div class="item-text">
                        <span class="item-text-bolder">${item.name}</span>
                        <span>${item.username}</span>
                    </div>
                </a>
            </c:forEach>
        </div>
    </div>

    <div class="col-sm-3">
        <div class="list-group" id="users">
        </div>
    </div>

    <div class="col-sm-5">
        <div id="session" style="height: 500px; overflow:auto;"></div>
        <div>
            <textarea class="chat-input" id="chat"></textarea>
            <button type="button" class="btn btn-primary" id="send">发送</button>
        </div>
    </div>
</div>

</div>
</body>
</html>
